<template>
  <span>
    <a-input
      type="text"
      :value="number"
      style="margin-right: 2%; width: 63%;"
      @change="handleNumberChange"
    />
    <a-select
      :value="currency"
      style="width: 32%;"
      @change="handleCurrencyChange"
    >
      <a-select-option value="rmb">RMB</a-select-option>
      <a-select-option value="dollar">Dollar</a-select-option>
    </a-select>
  </span>
</template>

<script lang="ts">
/* eslint-disabled */
import { Vue, Prop, Watch, Component } from 'vue-property-decorator'

@Component
export default class CustomizeFormItemTemplate extends Vue {
  @Prop({ default: () => ({}) }) value!: any

  private number = this.value.number || 0
  private currency = this.value.currency || 'rmb'

  @Watch('value')
  private onValueChange(value: any) {
    this.number = value?.number || 0
    this.currency = value?.currency || 'rmb'
  }

  private handleNumberChange(event: any) {
    const number = Number.parseInt(event.target.value || 0, 10)
    if (Number.isNaN(number)) {
      return
    }
    this.triggerChange({ number })
  }

  private handleCurrencyChange(currency: any) {
    this.triggerChange({ currency })
  }

  triggerChange(changedValue: any) {
    // Should provide an event to pass value to Form.
    this.$emit('change', {
      number: this.number,
      currency: this.currency,
      ...changedValue,
    })
  }
}
</script>
